@using AntDesign.Charts
@using Title = AntDesign.Charts.Title

    <Tabs>
        <TabPane Key="1">
            <Tab>Example 1</Tab>
            <ChildContent>
                <AntDesign.Charts.Column Data="data1" Config="config1" />
            </ChildContent>
        </TabPane>

        <TabPane Key="2">
            <Tab>Example 2</Tab>
            <ChildContent>
                <AntDesign.Charts.Column Data="data2" Config="config2" />
            </ChildContent>
        </TabPane>

        <TabPane Key="3">
            <Tab>Example 3</Tab>
            <ChildContent>
                <AntDesign.Charts.Column Data="data3" Config="config3" />
            </ChildContent>
        </TabPane>
    </Tabs>

@code{

    #region Example 1

    object[] data1 =
    {
        new
        {
            year = "1991",
            value = 31
        },
        new
        {
            year = "1992",
            value = 41
        },
        new
        {
            year = "1993",
            value = 35
        },
        new
        {
            year = "1994",
            value = 55
        },
        new
        {
            year = "1995",
            value = 49
        },
        new
        {
            year = "1996",
            value = 15
        },
        new
        {
            year = "1997",
            value = 17
        },
        new
        {
            year = "1998",
            value = 29
        },
        new
        {
            year = "1999",
            value = 33
        }
    };

    ColumnConfig config1 = new ColumnConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "Change chart guide style"
        },
        XField = "year",
        YField = "value",
        GuideLine = new[]
        {
            new GuideLineConfig
            {
                Type = "mean", // "max" | "min" | "median" |  "mean"
                LineStyle = new LineStyle
                {
                    Stroke = "red",
                    LineDash = new[] {4, 2}
                },
                Text = new GuideLineConfigText
                {
                    Position = "start",
                    Content = "Warning line",
                    Style = new TextStyle
                    {
                        Fill = "red"
                    }
                }
            }
        }
    };

    #endregion Example 1

    #region Example 2

    object[] data2 =
    {
        new
        {
            year = "1991",
            value = 31
        },
        new
        {
            year = "1992",
            value = 41
        },
        new
        {
            year = "1993",
            value = 35
        },
        new
        {
            year = "1994",
            value = 55
        },
        new
        {
            year = "1995",
            value = 49
        },
        new
        {
            year = "1996",
            value = 15
        },
        new
        {
            year = "1997",
            value = 17
        },
        new
        {
            year = "1998",
            value = 29
        },
        new
        {
            year = "1999",
            value = 33
        }
    };

    ColumnConfig config2 = new ColumnConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "Statistical value chart support line"
        },
        XField = "year",
        YField = "value",
        GuideLine = new[]
        {
            new GuideLineConfig
            {
                Type = "mean", // "max" | "min" | "median" |  "mean"
                Text = new GuideLineConfigText
                {
                    Position = "start",
                    Content = "median",

                }


            }
        }
    };

    #endregion Example 2

    #region Example 3

    object[] data3 =
    {
        new
        {
            year = "1991",
            value = 31
        },
        new
        {
            year = "1992",
            value = 41
        },
        new
        {
            year = "1993",
            value = 35
        },
        new
        {
            year = "1994",
            value = 55
        },
        new
        {
            year = "1995",
            value = 49
        },
        new
        {
            year = "1996",
            value = 15
        },
        new
        {
            year = "1997",
            value = 17
        },
        new
        {
            year = "1998",
            value = 29
        },
        new
        {
            year = "1999",
            value = 33
        }
    };

    ColumnConfig config3 = new ColumnConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "Custom chart support line"
        },
        XField = "year",
        YField = "value",
        GuideLine = new[]
        {
            new GuideLineConfig
            {
                Start = new[] {"0%", "50%"},
                End = new[] {"100%", "50%"},
                Text = new GuideLineConfigText
                {
                    Position = "start",
                    Content = "Custom location guide",
                },

            }
        }
    };

    #endregion Example 3

}